<template>
  <div class="choice-container" style="padding: 10px">
    <el-card>
      <div class="header">
        <span style="fontSize: 10px; color: pink"
          >说明:目前支持学科和关键字条件筛选</span
        >
        <el-button type="success" size="mini" icon="el-icon-edit"
          >{{$t("table.addTest")}}</el-button
        >
      </div>
      <!-- 表单组件-->
      <question-form :subject='subject' @on-success='tableData=$event'/>
      <!-- 表格切换 -->
      <el-tabs v-model="activeName" type="card" >
        <el-tab-pane label="全部" name="first">
          <check-table :tableData="tableData" @on-success='getChoice' />
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <check-table :tableData="tableData" @on-success='getChoice' />
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <check-table :tableData="tableData" @on-success='getChoice' />
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <check-table :tableData="tableData" @on-success='getChoice' />
        </el-tab-pane>
      </el-tabs>
      <!-- 页码 -->
      <el-pagination
        style="margin-top: 20px; textAlign: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :background="true"
        :current-page="query.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pagesize"
        layout=" sizes, prev, pager, next, jumper"
        :total="counts"
      />
    </el-card>
  </div>
</template>

<script>
import { choice } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import CheckTable from '@/components/CheckTable'
import QuestionForm from '@/components/QuestionForm'

export default {
  name: 'questionsChoice',
  components: {
    CheckTable,
    QuestionForm
  },
  data () {
    return {
      tableData: [],
      counts: 0,
      activeName: 'first',
      subject: []
    }
  },
  watch: {
    activeName (nvl, ovl) {
      if (nvl === 'second') {
        this.query.chkState = 0
      } else if (nvl === 'third') {
        this.query.chkState = 1
      } else if (nvl === 'fourth') {
        this.query.chkState = 2
      } else {
        this.query.chkState = null
      }
      this.getChoice()
    }
  },
  created () {
    this.query = {}
    this.getChoice()
    this.getSimple()
  },
  methods: {
    // 获取精选题库列表
    async getChoice () {
      const res = await choice(this.query)
      const { counts, items } = res.data
      this.counts = counts
      this.tableData = items
    },
    // 显示一页多少条
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getChoice()
    },
    // 跳到第几页
    handleCurrentChange (val) {
      this.query.page = val
      this.getChoice()
    },
    // 简单学科列表
    async  getSimple () {
      const { data } = await simple()
      this.subject = data
    }
  }
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
